<template>
  <div class="userManger">
    <!-- 表格相关 -->
    <Table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList()"
      @edit="editUser"
      @delete="deleteUser"
    ></Table>
  </div>
</template>

<script>
import Table from "../../components/Table";
import { reqUserData } from '../../api'
export default {
  name: "",
  props: [""],
  data () {
    return {
      tableData: [],
      tableLabel: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "sexLabel",
          label: "性别",
        },
        {
          prop: "birth",
          label: "出生日期",
          width: 120,
        },
        {
          prop: "addr",
          label: "地址",
          width: 200,
        },
      ],
      config: {
        page: 1,
        total: 20,
        loading: false,
      },
    };
  },
  components: {
    Table,
  },
  computed: {},
  created () {
    this.getList();
  },
  methods: {
    //   获取表格数据
    async getList () {
      this.config.loading = true;
      const result = await reqUserData(this.config.page)
      if (result.code === 20000) {
        this.tableData = result.list.map((item) => {
          item.sexLabel = item.sex === 0 ? "女" : "男";
          return item;
        });
        this.config.total = result.count;
        this.config.loading = false;
      }
    },
    // 编辑用户
    editUser (row) {
      console.log('编辑用户')
    },
    // 删除用户
    deleteUser (row) {
      console.log('删除用户')
    },
  },
};
</script>
<style lang="less" scoped>
.userManger {
  height: calc(100% - 64px);
}
</style>